<!-- 首页 -->
<template>
  <div v-loading="loading">
    <basic-container>
      <div class="home-container" style="padding-bottom: 0">
        <div class="name">用户数据</div>
        <el-row class="mt20" :gutter="20">
          <el-col
            :xl="4"
            :lg="6"
            :md="12"
            :xs="24"
            v-for="(item, index) in userMenu"
            :key="'userMenu' + index"
          >
            <div :style="{ 'background-color': item.color }" class="menu-item">
              <div>
                <div class="mb15">{{ item.name }}</div>
                <div class="menu-item-value">{{ item.value }}</div>
              </div>
              <i :class="item.icon" style="font-size: 26px"></i>
            </div>
          </el-col>
        </el-row>
      </div>
    </basic-container>
    <basic-container>
      <div class="home-container">
        <div class="name">运单数据</div>
        <el-row class="mt20">
          <el-col
            :span="3"
            v-for="(item, index) in waybillData"
            :key="'waybillData' + index"
            class="user-item"
          >
            <div class="mb10">{{ item.value }}</div>
            <div class="menu-item-value">{{ item.name }}</div>
          </el-col>
        </el-row>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { getList } from "@/api/home/index";
export default {
  name: "home",
  data() {
    return {
      loading: false,
      userMenu: [
        {
          name: "承运商",
          value: "0",
          color: "rgb(169,232,177)",
          icon: "el-icon-s-custom",
        },
        {
          name: "司机",
          value: "0",
          color: "rgb(42,209,153)",
          icon: "el-icon-s-custom",
        },
        {
          name: "押运员",
          value: "0",
          color: "rgb(214,180,182)",
          icon: "el-icon-s-custom",
        },
        {
          name: "车辆",
          value: "0",
          color: "rgb(106,141,174)",
          icon: "el-icon-truck",
        },
      ],
      // 运单数据
      waybillData: [
        { name: "需求单总数", value: "0" },
        { name: "已接单", value: "0" },
        { name: "待启运", value: "0" },
        { name: "待送达", value: "0" },
        { name: "待完成", value: "0" },
        { name: "已完成", value: "0" },
      ],
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loading = true;
      getList().then(
        ({ data }) => {
          this.loading = false;
          if (data.code === 200 && data.success) {
            let userData = data.data.userData;
            if (data.data.escortData) {
              userData.push({
                ...data.data.escortData,
              });
            }
            if (data.data.vehicleData) {
              userData.push({
                ...data.data.vehicleData,
              });
            }
            let waybillData = data.data.waybillData;
            this.userMenu.map((item) => {
              for (let i in userData) {
                if (item.name === userData[i].name) {
                  item.value = userData[i].value;
                }
              }
            });
            // console.log(this.userMenu);
            this.waybillData.map((item) => {
              for (let i in waybillData) {
                if (item.name === waybillData[i].name) {
                  item.value = waybillData[i].value;
                }
              }
            });
          }
        },
        (error) => {
          window.console.log(error);
          this.loading = false;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 20px;
  background-color: #fff;
}
.name {
  border-left: 5px rgb(42, 209, 153) solid;
  padding-left: 10px;
}
.mr30 {
  margin-right: 30px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb10 {
  margin-bottom: 10px;
}
.menu-item {
  padding: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  // margin-right: 20px;
  margin-bottom: 20px;
  .menu-item-value {
    font-weight: bold;
    font-size: 20px;
  }
}
.user-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
